<!DOCTYPE html>
<!--加这个标签以后才可以对model模型进行解析-->
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--/*@thymesVar id="question" type="com.xuan.forum.dto.QuestionDto"*/-->
    <title th:text="${question.title + ' - PCF社区'}">.1/jque</title>
    <link href="/css/editormd.preview.min.css" rel="stylesheet">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="/js/editormd.min.js" type="text/javascript"></script>
    <script src="/js/lib/marked.min.js"></script>
    <script src="/js/lib/prettify.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link href="/css/bootstrap-theme.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/commnuity.css"  charset="UTF-8">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
    <script  src="/js/community.js" type="text/javascript"></script>
    <script  src="/js/jquerysession.js" type="text/javascript"></script>
</head>
<body>
<!-- 导航栏部分引用 -->
<div th:insert="~{navigation :: nav}"></div>

<!-- 图标class glyphicon glyphicon-list -->
<nav class="navbar navbar-default">
    <div class="container-fluid profile" id="left_main">
        <div class="row">
            <!--左侧文章部分-->
            <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
                <!-- 文章标题 -->
                <h4 th:text="${question.title}"></h4>
                <span class="test_desc">
                           作者<span th:text=" ' ' + ${question.user.name}"></span> |
                           发布时间<span
                        th:text="${#dates.format(question.getDateByLong(question.gmtCreate), 'yyyy-mm-dd hh:mm:ss')}"></span> |
                          阅读数 ·<span th:text="${question.viewCout}"></span>
                        </span>
                <hr  >
                <!-- 问题描述开始  th:text="${question.description}" -->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="question-view" >
                    <textarea style="display:none;" th:text="${question.description}" ></textarea>
                </div>

                <script type="text/javascript">
                    $(function() {
                        var testView = editormd.markdownToHTML("question-view", {});
                    });
                </script>

                <!-- 问题描述结束 -->
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <!-- 标签 -->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<!--                    <span class="label label-info" th:text="${question.tag}">Info</span>-->

                    <span class="label label-info tag_span" th:each="tag,tagStat :${question.tag.split(',')}">
                        <span class="glyphicon glyphicon-tags"></span>
                            <span class="label label-info" th:text="${tag}"></span>
                    </span>
                </div>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <!-- 编辑按钮开始 -->
                    <a th:href="@{'/publish/' + ${question.id} }" style="color: #999; font-size: 18px" th:if="${session.user != null && session.user.name == question.creator}">
                        <span class="glyphicon glyphicon-tags" aria-hidden="true"/>编辑
                    </a>
                <!-- 编辑按钮结束 -->

                <!-- 回复数量 -->
                <h4 th:text="${question.commentCount + '个回复'}"></h4>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top: 0px">

                <!-- 评论循环开始 -->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 "  th:each="comment,infoStat :${commentList}">
                    <div class="media-left media-middle">
                        <a href="#">
                            <img class="media-object img-rounded" style="width: 40px"
                                 th:src="${comment.user.avatarUrl}" alt="..."/>
                        </a>
                    </div>
                    <div class="media-body" style="margin: 10px 0px; padding: 10px">
                        <!--                    <div class="media-body media-body_xuan">-->
                        <h4 class="media-heading" >
                            <span class="comment_name"  th:text="${comment.user.name}"></span>
                        </h4>
                        <span class="comment_name" th:text="${comment.user.bio}"></span>
                        <br>
                    </div>

                    <!-- 评论内容 -->
                    <div class="comment_value"  th:text="${comment.content}">这是我的评论内容</div>
                    <!-- 评论下方点赞 -->
                    <div class="comment_list_value" >
                        <!--点赞按钮-->
                        <span class="glyphicon glyphicon-thumbs-up comment_like" aria-hidden="true"></span>
                        <!-- 评论按钮    -->
                        <span class="glyphicon glyphicon-comment comment_like" aria-hidden="true"
                              th:data-id="${comment.id}"
                              th:id="${comment.id}"
                              th:data-toggle="${'collapse'}"
                              th:data-target="${'#id'+comment.id}"
                              th:aria-controls="${'id'+comment.id}"

                              onclick="change_view_color(this)">
                            <!-- 子评论数量 -->
                        </span>
                        <span class="comment_count" th:text="${comment.commentCount +'个评论'}"></span>
                        <span class="pull-right"
                              th:text="${#dates.format(comment.gmtCreate, 'yyyy-MM-dd HH:mm:ss')}" ></span>

                        <!-- 二级评论列表开始 -->
                        <div class=" col-lg-12 col-md-12 col-sm-12 col-xs-12 collapse"
                             th:class="${1 == 1} ? 'collapse' : 'collapse' "
                             th:id="${'id'+comment.id}" >
                            <hr th:id="${'comment-hr-id'+comment.id}"  class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <input  th:if="${session.user != null }" type="hidden" th:id="${'login-'+comment.id}">

                            <input  th:if="${session.user != null }" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-control" type="text" placeholder="评论一下"  th:id="${'input'+comment.id}">
                            <!-- 未登录情况下 评论框不可以输入 -->
                            <input  th:if="${session.user == null }" disabled="disabled" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-control" type="text" placeholder="登录之后才可以进行评论哦">

                            <button th:if="${session.user != null }" type="button" class="btn btn-success" onclick="comment(this)"  th:data-id="${comment.id}" >评论</button>
                            <!-- 如果没有登录评论框框失效 -->
                            <button th:if="${session.user == null }" type="button"  disabled="disabled" class="btn btn-success"   th:data-id="${comment.id}" >评论</button>
                        </div>
                        <!-- 二级评论列表结束 -->
                    </div>


                    <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top: 0px">
                </div>
                <!-- 评论循环结束 -->



                <!--  左侧评论框框开始 -->
                <div id="comment_section" class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >
                    <div class="media-left media-middle">
                        <a href="#">
                            <img class="media-object img-rounded" style="width: 40px"
                               th:if="${session.user !=null }"   th:src="${session.user.avatarUrl}" alt="..."/>
                        </a>
                    </div>
                    <div class="media-body" style="margin: 10px 0px; padding: 10px">
<!--                    <div class="media-body media-body_xuan">-->
                        <h4 class="media-heading" >
                            <span   th:if="${session.user != null }" th:text="${session.user.name}"></span>
                            <span   th:if="${session.user == null }" >登录之后,才可以进行评论哦</span>
                        </h4>
                        <span  th:if="${session.user !=null }" th:text="${session.user.bio}"></span>
                        <br>
                    </div>
                    <input type="hidden" id="question_id" th:value="${question.id}" />
                    <textarea id="comment_content" class="form-control" rows="6" style="padding-top: 10px" placeholder="请输入您的看法"></textarea>
                    <!-- 评论框下方提交按钮 -->

                    <button th:if="${session.user != null }" type="button" class="btn btn-success" onclick="post()">回复</button>
                    <button th:if="${session.user == null }" type="button" disabled="disabled" class="btn btn-success" >回复</button>
                </div>
                <!--  左侧评论框框结束 -->

                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">


            </div>
            <!--左侧文章部分结束-->


            <!-- 右侧侧边栏开始 -->
            <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
                <!-- 发起人开始 -->
                <div class=" col-lg-12 col-md-12 col-sm-12 col-xs-12" >
                    <h3>发起人</h3>
                        <div class="media-left media-middle">
                            <a href="#">
                                <img class="media-object img-rounded" style="width: 40px"
                                     th:src="${question.user.avatarUrl}" alt="..."/>
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading" >
                                <span  th:text="${question.user.name}"></span>
                            </h4>
                            <span th:text="${question.user.bio}"></span>
                            <br>
                        </div>

                </div>
                <!-- 发起人结束 -->
                <hr class=" col-lg-12 col-md-12 col-sm-12 col-xs-12">

                <!--推荐内容 开始-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top: 15px">
                    <h3>推荐内容</h3>
                    <img class="img-thumbnail" src="/img/recommend.jpg">
                </div>
                <!--推荐内容 结束-->


                <hr class=" col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <!-- 相关问题开始 -->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top: 15px">
                    <h3>相关问题</h3>
                    <ul class="list-group">
                        <li  th:each="reated,infoStat :${reatedQuestion}" >
                            <a th:href="@{'/question/'+${reated.id}}" th:text="${reated.title}"></a>
                        </li>
                    </ul>
                </div>
                <!-- 相关问题结束 -->
            </div>
            <!-- 右侧侧边栏结束 -->

        </div>



    </div>
</nav>
<!-- 页尾部分引用 -->
<div class="footer" th:insert="~{footer :: foot}"></div>
</body>
</html>